<el-dialog
        title="素材库"
        :close-on-click-modal="false"
        :show-close="true"
        :visible.sync="GalleryParams.operation.dialog"
        width="900px"
        :lock-scroll="false"
        custom-class="Va-dialog auto"
        append-to-body
        top="8vh"
        v-if="GalleryParams.operation.dialog"
>
    <div v-loading="GalleryParams.operation.loading"  :element-loading-text="GalleryParams.operation.loadingMsg">
        <el-row :gutter="24" type="flex" >
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" style="padding-right: 0">
                <template v-if="GalleryParams.options.tabs">
                    <el-tabs class="gallery-tab" v-model="GalleryParams.options.type" @tab-click="$Gallery.GalleryTabEvent">
                        <el-tab-pane name="1">
                            <span slot="label"><i class="el-icon-picture-outline"></i> 图片</span>
                        </el-tab-pane>
                        <el-tab-pane name="2">
                            <span slot="label"><i class="el-icon-video-camera"></i> 视频</span>
                        </el-tab-pane>
{{--                        <el-tab-pane name="3">--}}
{{--                            <span slot="label"><i class="el-icon-folder-opened"></i> 文件</span>--}}
{{--                        </el-tab-pane>--}}
                        {{--                        <el-tab-pane name="4">--}}
                        {{--                            <span slot="label"><i class="el-icon-c-scale-to-original"></i> 网页</span>--}}
                        {{--                        </el-tab-pane>--}}
                        {{--                        <el-tab-pane name="5">--}}
                        {{--                            <span slot="label"><i class="el-icon-microphone"></i> 音频</span>--}}
                        {{--                        </el-tab-pane>--}}
                        {{--                        <el-tab-pane name="20">--}}
                        {{--                            <span slot="label"><i class="el-icon-place"></i> 图标</span>--}}
                        {{--                        </el-tab-pane>--}}
                    </el-tabs>
                </template>
                <div class="gallery-header">
                    <div style="height: 42px">
                        <div style="float: left;margin-top: 12px;margin-left: 10px" >
                            <el-input placeholder="请输入名称搜索" v-model="GalleryParams.search.keyword" size="small" clearable style="float: left;width: 200px;margin-right: 10px"></el-input>
                            <el-button type='primary' size="small" @click="$Gallery.GalleryRequestLists"  style="float: left"><i class="fa fa-search"></i> 搜索</el-button>

                        </div>
                        <div data-7512a93d style="float: right;margin-top: 12px;margin-right: 15px" class="float-left">
                            <span class="manage">
                                 <el-button type='text' size="small" @click="$Gallery.GalleryGroupInsertEvent" v-if="GalleryParams.operation.groupManage && GalleryParams.groupItems.length < GalleryParams.operation.groupMax">
                                    <i class="el-icon-plus"></i> 添加分组
                                </el-button>
                                <el-button type='primary' size="small" @click="$Gallery.GalleryGroupManageEvent">
                                    <i class="el-icon-s-tools"></i> @{{GalleryParams.operation.groupManage?'取消管理':'分组管理'}}
                                </el-button>
                            </span>
{{--                            <el-button type='primary' size="small" @click="$Gallery.GalleryRemotePictureEvent"--}}
{{--                                       style="margin-left: 12px" v-show="GalleryParams.options.type == 1">--}}
{{--                                <i class="fa fa-cloud-download"></i> 远程图片--}}
{{--                            </el-button>--}}

                            <el-button type='primary' size="small" @click="$Gallery.GalleryAddPageEvent"
                                       style="margin-left: 12px" v-show="GalleryParams.options.type == 4">
                                <i class="el-icon-plus"></i> 添加页面
                            </el-button>
                            <el-upload
                                    :action="GalleryParams.action"
                                    :multiple="true"
                                    :headers="GalleryParams.postHeaders"
                                    :limit="GalleryParams.options.max"
                                    :show-file-list="false"
                                    :data="GalleryParams.postData"
                                    :on-progress="$Gallery.GalleryUploadProgress"
                                    :on-success="$Gallery.GalleryUploadSuccess"
                                    :on-error="$Gallery.GalleryUploadError"
                                    :before-upload="$Gallery.GalleryUploadBefore"
                                    ref="GalleryDialogUpload" style="float: right"
                            >
                                <el-tooltip class="item" effect="dark" :content="'大小不超过'+GalleryParams.options.size+'M，支持'+GalleryParams.options.suffix+'文件后缀'" placement="top">
                                    <el-button size="small" type="primary"   size="medium" style="margin-left: 12px">
                                        <i class="fa fa-cloud-upload"></i> 本地上传
                                    </el-button>
                                </el-tooltip>
                            </el-upload>
                        </div>
                    </div>
                    <div class="gallery-dialog-group-box">
                        <template v-for="(item, index) in GalleryParams.groupItems">
                            <span class="item" :class="{ active: item.id==GalleryParams.search.group_id}" @click="$Gallery.GalleryGroupChangeEvent(item)">
                                <span class="text-space" style="max-width: 100px;display: initial">@{{item.name}} </span>(@{{item.total}})
                                <span v-if="GalleryParams.operation.groupManage && item.remove" >
                                    <i class="el-icon-edit-outline"  @click.stop="$Gallery.GalleryGroupUpdateEvent(index, item)"></i>
                                    <i class="el-icon-delete" v-if="GalleryParams.operation.groupManage && item.remove"  @click.stop="$Gallery.GalleryGroupRemoveEvent(index, item)"></i>
                                </span>
                            </span>
                        </template>

{{--                        <template>--}}
{{--                            <div class="dashboard-container">--}}
{{--                                <div class="dashboard-text">测试:123</div>--}}
{{--                                <el-upload--}}
{{--                                        class="avatar-uploade"--}}
{{--                                        :multiple="true"--}}
{{--                                        :action="actionPath"--}}
{{--                                        accept="image/jpeg,image/gif,image/png,image/bmp"--}}
{{--                                        :before-upload="beforeAvatarUpload"--}}
{{--                                        :data="postData"--}}
{{--                                        :on-success="handleAvatarSuccess">--}}
{{--                                    <img v-if="imageUrl" :src="imageUrl" class="avatar">--}}
{{--                                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>--}}
{{--                                </el-upload>--}}
{{--                            </div>--}}
{{--                        </template>--}}
{{--                        <script>--}}
{{--                            export default {--}}
{{--                                data() {--}}
{{--                                    return {--}}
{{--                                        imageUrl: '',--}}
{{--                                        actionPath: "https://upload-z2.qiniup.com",--}}
{{--                                        postData: {--}}
{{--                                            token: "YqlWhkR0lAtzXAVy-1VE3dla-w5xyMC_tXsSgFdV:Zb97CW7xkVjO-Yhb5rCy1UcmmZ4=:",--}}
{{--                                            key: ""--}}
{{--                                        }--}}
{{--                                    };--}}
{{--                                },--}}
{{--                                mounted() {--}}
{{--                                    this.postData.key = Date.parse(new Date()) + '.png';--}}
{{--                                },--}}
{{--                                methods: {--}}
{{--                                    handleAvatarSuccess(res, file) {--}}
{{--                                        console.log("上传成功", res, file)--}}
{{--                                        this.imageUrl = URL.createObjectURL(file.raw);--}}
{{--                                    },--}}
{{--                                    beforeAvatarUpload(file) {--}}
{{--                                        console.log("上传前")--}}
{{--                                    }--}}
{{--                                }--}}
{{--                            }--}}
{{--                        </script>--}}
                    </div>
                </div>
                <div class="gallery-image">
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" style="padding-right:0;padding-left:0">
                        <div class="Va-dialog-main" :style="layouts.dialogFormsHeight" data-7512a93d style="min-height: 410px">
                            <template v-if="GalleryParams.imagesItems.length > 0">
                                <template v-if="GalleryParams.options.type != 4">
                                    <div class="gallery-dialog-image-item" v-for="(item, index) in GalleryParams.imagesItems"
                                         :key="index" :title="item.original"
                                         @click="$Gallery.GalleryItemCheckboxEvent(item)">
                                        <el-image :src="item.url" fit="contain" :lazy="true" v-if="GalleryParams.options.type == 1">
                                            <div slot="error" class="image-slot">
                                                <i class="el-icon-picture-outline"></i>
                                            </div>
                                        </el-image>
                                        <template v-if="GalleryParams.options.type == 2">
                                            <div style="border: 1px dashed #d9d9d9;border-radius: 5px;">
                                                <video :src="item.url" :poster="item.url" controls="controls" width="130" height="140" autoplay>
                                                    <source :src="item.url" type="video/mp4" />
                                                </video>
                                            </div>
                                        </template>
                                        <el-image :src="item.url" fit="contain" :lazy="true" v-if="GalleryParams.options.type == 3">
                                            <div slot="error" class="image-slot">
                                                <i class="el-icon-picture-outline"></i>
                                            </div>
                                        </el-image>
                                        <span class="text-space" :title="item.original">@{{item.original}}</span>
                                        <div class="gallery-image-checkbox" v-if="!item.active" @click="$Gallery.GalleryItemCheckboxEvent(item)"><i class="fa fa-square-o" @click="$Gallery.GalleryItemCheckboxEvent(item)"></i></div>
                                        <div class="gallery-image-active" v-if="item.active" @click="$Gallery.GalleryItemActiveInEvent(item)"><i class="fa fa-check-square" @click="$Gallery.GalleryItemActiveInEvent(item)"></i></div>
                                        <div class="gallery-image-selected" @click="$Gallery.GalleryItemActiveInEvent(item)"></div>
                                        <div class="gallery-image-dropdown">
                                            <el-dropdown @command="$Gallery.GalleryItemDropdownEvent(event, item)" size="mini">
                                                <el-button icon="el-icon-more" circle size="mini"></el-button>
                                                </span>
                                                <el-dropdown-menu slot="dropdown">
                                                    <el-dropdown-item command="edit" data-command="edit"><i class="el-icon-edit"></i> 重命名</el-dropdown-item>
                                                    <el-dropdown-item command="remove" data-command="remove"><i class="el-icon-delete"></i> 删除</el-dropdown-item>
                                                    {{--                                                    <el-dropdown-item command="preview" data-command="preview"><i class="el-icon-delete"></i> 预览</el-dropdown-item>--}}
                                                </el-dropdown-menu>
                                            </el-dropdown>
                                        </div>
                                    </div>
                                </template>
                                <div class="form-container-main inline-tables" v-else>
                                    <el-table
                                            :data="GalleryParams.imagesItems"
                                            tooltip-effect="dark"
                                            ref="formContainerTables"
                                            highlight-current-row
                                            @current-change="$Gallery.GalleryItemCheckboxEvent"
                                            row-key="id"
                                    >
                                        <el-table-column prop="original" label="名称" align="center" min-width="100"></el-table-column>
                                        <el-table-column prop="url" label="地址" align="center" min-width="150"></el-table-column>
                                        <el-table-column prop="options" label="操作" align="center" width="150">
                                            <template slot-scope="scope">
                                                <el-button size="mini" primary type="text" @click="$Gallery.GalleryAddPageEvent(scope.row, true)">编辑</el-button>
                                                <el-button size="mini" danger type="text" @click="$Gallery.GalleryItemRemoveEvent(scope.row)">删除</el-button>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </div>
                            </template>
                            <template v-else>
                                <div class="No-data" style="line-height: 0">
                                    <img src="/statics/v1/images/empty/data.png" alt="暂无数据">
                                </div>
                            </template>
                        </div>
                        <template  v-if="GalleryParams.imagesItems.length > 0">
                            <el-pagination  style="clear: both;position: relative;text-align: center;"
                                            @current-change="$Gallery.GalleryImagesPageChange"
                                            :current-page="GalleryParams.search.page"
                                            :page-size="GalleryParams.search.size"
                                            layout="total, prev, pager, next"
                                            :total="GalleryParams.operation.imageTotal">
                            </el-pagination>
                        </template>
                    </el-col>
                </div>
            </el-col>
        </el-row>
        <div slot="footer" class="Va-dialog-footer" data-7512a93d>
            <div class="Va-text-left" data-7512a93d style="width: 200px;float: left;margin-left: 10px">
                已选择 @{{GalleryParams.selected.length}} / @{{GalleryParams.options.max}}
            </div>
            <div class="Va-text-right" data-7512a93d>
                <el-button @click="$Gallery.GalleryUploadDialogClose" type="default" size="medium">取 消</el-button>

                <el-button @click="$Gallery.GalleryUploadDialogSubmit" type="primary" size="medium" :disabled="GalleryParams.selected.length < 1">提 交</el-button>
            </div>
        </div>
    </div>
</el-dialog>